<template>
	<!--列表样式-->
	<view class="p-2">
		<!--头像昵称 | 关注按钮-->
		<view class="flex align-center justify-between">
			<view class="flex align-center">
				<!--头像-->
				<image 
					class="avator rounded-circle mr-2" 
					:src="item.userpic" 
					lazy-load
					@click.stop="openSpace()">
				</image>
				<!--昵称发布时间-->
				<view>
					<view class="font line-height">{{ item.username }}</view>
					<text class="font-sm text-light-muted line-height">{{ item.newstime }}</text>
				</view>
			</view>
			<!--按钮-->
			<view 
			class="follow-btn flex align-center justify-center rounded bg-main text-white animated faster"
			hover-class="pulse"
			v-if="!item.isFollow"
			@click="follow()">
				关注
			</view>
		</view>
		<!--标题-->
		<view 
			class="font-md my-1" 
			@click="openDetail()">
			{{ item.title }}
		</view>
		<!--封面图片-->
		<image 
			v-if="item.titlepic" 
			:src="item.titlepic" 
			class="cover-height w-100 rounded"
			 @click="openDetail()">
		</image>
		<!--图标按钮-->
		<view class="flex align-center">
			<!-- 顶 -->
			<view 
			class="flex align-center justify-center flex-1 animated falster"
			hover-class="pulse text-main"
			:class="item.support.type === 'support' ? 'support-active': ''"
			@click="doSupport('support')">
				<text class="iconfont icon-dianzan2 mr-2"></text>
				<text>{{ item.support.support_count > 0 ? item.support.support_count : '顶' }}</text>
			</view>
			<!-- 踩 -->
			<view class="flex align-center justify-center flex-1 animated falster"
			hover-class="pulse text-main"
			:class="item.support.type === 'unsupport' ? 'support-active': ''"
			@click="doSupport('unsupport')">
				<text class="iconfont icon-cai mr-2"></text>
				<text>{{ item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩' }}</text>
			</view>
			<!-- 评论 -->
			<view class="flex align-center justify-center flex-1 animated falster"
			hover-class="pulse text-main"
			@click="openDetail()">
				<text class="iconfont icon-pinglun2 mr-2"></text>
				<text>{{ item.comment_count > 0 ? item.comment_count : '评论' }}</text>
			</view>
			<!-- 分享 -->
			<view class="flex align-center justify-center flex-1 animated falster"
			hover-class="pulse text-main"
			@click="openDetail()">
				<text class="iconfont icon-fenxiang mr-2"></text>
				<text>{{ item.share_num > 0 ? item.share_num : '分享'}}</text>
			</view>
			
		</view>
	</view>
</template>
<script>
export default {
	//接受父组件数据
	props: {
		item: Object,
		index: Number
	},
	methods: {
		// 点击头像打开个人空间
		openSpace() {
			console.log("打开个人空间")
		},
		// 点击关注
		follow() {
			// 通知父组件 - 更改关注状态
			this.$emit('follow', this.index);
		},
		// 点击标题、封面进入详情
		openDetail() {
			console.log('进入详情')
		},
		// 点击顶 / 踩
		doSupport(type) {
			// 通知父组件 - 顶 / 踩操作
			this.$emit('doSupport', {
				type,
				index: this.index
			});
		}
	}
}
</script>
<style scoped>
.avator {
	width: 65rpx;
	height: 65rpx;
}
.follow-btn {
	width: 90rpx;
	height: 50rpx;
}
.cover-height {
	height: 350rpx;
}
.line-height {
	line-height: 1.5;
}
.support-active {
	color: #ff4a6a;
}
</style>